<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="name" placeholder="请输入要查询的内容"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search" :disabled="!name">查询</el-button>
        <el-button type="primary" @click="searchAll">显示所有</el-button>
        <el-button type="primary" @click="removeUsers">删除所选</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: ""
    }
  },
  methods: {
    search () {
      this.$store.commit('setSearch', {name: this.name})

      this.$store.dispatch('getUsers')
    },
    searchAll () {
      this.$store.commit('setSearch', {
        name: '',
        page: 1
      })
      this.name = ''
      this.$store.dispatch('getUsers')
    },
    removeUsers () {
      this.$store.dispatch('removeUsers')
    }
  }
}
</script>

<style>

</style>
